<template>
  <dv-border-box-12 class="networkSpeed">
    <screenTitle :title="title"/>
    <div class="networkSpeed-content">
      <div class="speedLine-chart" id="speedLine"></div>
    </div>
  </dv-border-box-12>
</template>

<script>
import screenTitle from './screenTitle'
import * as echarts from 'echarts'
export default {
  name: 'networkSpeed',
  components:{
    screenTitle,
  },
  data(){
    return{
      title: '网速监测',
    }
  },
  mounted () {
    this.$nextTick(() =>{
      this.initCharts()
    })
  },
  methods:{
    initCharts(){
      const charts = echarts.init(document.getElementById('speedLine'))
      const data = [["2023-06-05", 116], ["2023-06-06", 129], ["2023-06-07", 135], ["2023-06-08", 86], ["2023-06-09", 73], ["2023-06-10", 85], ["2023-06-11", 73], ["2023-06-12", 68], ["20236-13", 92], ["2023-06-14", 130], ["2023-06-15", 245], ["2023-06-16", 139], ["202306-17", 115], ["2023-06-18", 111], ["2023-06-19", 309], ["2023-06-20", 206], ["2023-06-21", 137], ["2023-06-22", 128], ["2023-06-23", 85], ["2023-06-24", 94], ["2023-06-25", 71], ["2023-06-26", 106], ["2023-06-27", 84], ["2023-06-28", 93], ["2023-06-29", 85], ["2023-06-30", 73], ["2023-07-01", 83], ["2023-07-02", 125], ["2023-07-03", 107], ["2023-07-04", 82], ["2023-07-05", 44], ["2023-07-06", 72], ["2023-07-07", 106], ["2023-07-08", 107], ["2023-07-09", 66], ["2023-07-10", 91], ["2023-07-11", 92], ["2023-07-12", 113], ["2023-07-13", 107], ["2023-07-14", 131], ["2023-07-15", 111], ["2023-07-16", 64], ["2023-07-17", 69], ["2023-07-18", 88], ["2023-07-19", 77], ["2023-07-20", 83], ["2023-07-21", 111], ["2023-07-22", 57], ["2023-07-23", 55], ["2023-07-24", 60]];
      const dateList = data.map(function (item) {
        return item[0];
      });
      const valueList = data.map(function (item) {
        return item[1];
      });
      const option = {
        color: ['#1acee9'],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            data: dateList
          },
        ],
        yAxis: [
          {
            splitLine: {
              show: false,
            },
          },
        ],
        grid: [
          {
            top: '10%'
          },
        ],
        series: [
          {
            type: 'line',
            showSymbol: false,
            data: valueList
          },
        ]
      };
      charts.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.networkSpeed{
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 0px 20px #b7f1f3;
  border-radius: 10px;
}
.networkSpeed-content{
  width: 90%;
  height:60%;
  margin: 5% auto 0;
}
.speedLine-chart{
  height: 150px;
}
</style>
